import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, ImagePicker,ActionSheet} from 'antd-mobile';
import styles from './selfInfo.less';

import NavBarItem from '../../../components/WitNavBar/index'
const Item = List.Item;
let wrapProps;
const empty = require('is-empty');
class Mine extends React.Component{

  constructor(props){
    super(props);
    this.state={
      files: [], //头像
    }
  }

  //修改登陆密码
  checkPWD = () =>{
    console.log('password');
    this.props.dispatch(
      routerRedux.push({
        pathname:"/selfinfo/changepwd",
      })
    )
  };
  //修改手机号
  checkPhone = () =>{
    console.log('phone');
    this.props.dispatch(
      routerRedux.push({
        pathname:"/selfinfo/changephone",
      })
    )
  };
  //修改头像
  showPhotoChange =()=>{
    const BUTTONS = ['拍照', '相片', '取消'];
    ActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        // title: '标题',
        message: '更改头像',
        maskClosable: true,
        'data-seed': 'logId',
        wrapProps,
      },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      });
  };

  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  };

  render(){
    // const photo = (
    //   <div className={styles.photo}></div>
    // );
    const { files } = this.state;
    const photo =(
      <div>
        <ImagePicker
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 1}
        />
      </div>
    );
    const name = '张建党';
    const position = '党支部书记';
    const phone = '130546***442';
    const IDcard= '500104**********1412';

    return(
      <div>
        {/*<NavBarItem title="个人详情"/>*/}
        {/*<WhiteSpace size="xl" />*/}
        <List className="my-list">
          {/*<Item extra={photo} style={{height:'2rem'}} onClick={this.showPhotoChange}>{name}</Item>*/}
          <Item  style={{height:'2rem'}}>
            <div style={{position:'absolute',top:'31%',float:'left'}}>{name}</div>
           <div style={{position:'relative',left:'70%'}}>{photo}</div>
          </Item>
          <Item extra={position} >职位</Item>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra={phone} arrow="horizontal" onClick={this.checkPhone} >手机号</Item>
          <div className="IDcardSelf">
            <Item extra={IDcard} >身份证号</Item>
          </div>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra='修改' arrow="horizontal" onClick={this.checkPWD}>登陆密码</Item>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">

        </List>
      </div>
    )
  }
}

function mapStateToProps({mine}) {
  return {mine}
}
export default connect(mapStateToProps)(Mine);
